
<template>
  <div id="makeCall">
		  <magic-header titleName="我的挪车码" v-if="!isWxPublic"></magic-header>
      <section id="wrapper" v-show="showMain">
		  <empty v-if="!isBind" message="您还尚未绑定挪车码"></empty>
			<div id="qrcode_mine" class="mui-content" v-if="mobile.length === 11">
				<div class="qrcode_mine_img" id="qrcode_mine_img">
        	<vue-qr :text="code" height="200" width="200"></vue-qr>
          <img id="logo_img" :src="newLogo" alt="" />
				</div>
				<div class="qrcode_mine-footer">
					<p>
						此二维码可打印后放置车内，便于他人联系您<br>
					</p>
					<div class="qrcode_mine_tel">
						<span>我的挪车电话：</span><input readonly :value="mobile" type="text" id="text" maxlength="20" /><i class="iconfont icon-bianji" id="edit" @click="show"></i>
					</div>
				</div>
			</div>
			<div id="phoneModel" v-show="isShow">
				<div class="modal-content">
					<h3>修改挪车电话</h3>
					<ul class="inputBox">
						<li><input type="number" id="phoneNumber" v-model="newPhoneNumber" placeholder="请输入新的挪车电话"></li>
						<li class="verCodeBox"><input type="number" id="verCode" v-model="verCode" placeholder="请输入验证码"><span id="getVerCode" @click="getVerCode">{{text}}</span></li>
					</ul>
					<ul class="buttonBox">
						<li><input id="cancel" class="mui-pull-left" type="button" value="取消" @click="hide"></li>
						<li><input id="apply" class="mui-pull-right" type="button" value="确认" @click="submit"></li>
					</ul>
				</div>
			</div>
		</section>
  </div>
</template>
<script>
import magicHeader from "components/magicHeader";
import VueQr from 'vue-qr'
import empty from 'components/empty-page-vfhz'
  import imagesServices from "services/getImage/getImage"
export default {
  data() {
    return {
			code:'1',//生成二维码的数据
			sendCode:'',//绑定二维码数据
      shopId:'',
      userId:'',
      mobile:'',
      newLogo:'',
      isShow:false,
      text:'获取验证码',
      newPhoneNumber:'',
      verifyNumber:'', // 验证码
			countDown: '60', //倒计时时间
			flag : true, //判断是否可以点击
			validateCode:'',//手机验证码
			verCode:'',
			isWxPublic:false,
			isBind:true,
			showMain:false
    };
  },
  created() {
		imagesServices.bind(this)({},res=>{
        this.newLogo = res.data.newLogo
      })
		if(this.$.env === 'wxPublic'){
      this.isWxPublic = true;
    }
		this.shopId = this.$.shopId;
    if(this.isWxPublic){
      //获取shopId =
      //获取用户信息
      let user = JSON.parse(localStorage.getItem('user'));
      this.userId = user.userId;
      this.mobile = user.mobile;
    }else{
			this.userId = this.$.userId;
		}
    this.getCode().then(res=>{
			console.log(res);
			this.sendCode = res.code;
      this.code = 'type=5&id='+res.code;
			this.mobile = res.mobile
			console.log(res.mobile.length !== 11)
			if(res.mobile.length === 11){
						this.isBind = true
			}else{
						this.isBind = false
			}
		})
		setTimeout(() => {
			this.showMain = true;
		}, 1000);
  },
  methods:{
    getCode() {
      return new Promise(
        function(resolve, reject) {
          this.$.get({
              methodName: "QueryMoveCar",
              shopId: this.shopId || "",
			        userId: this.userId || ""
            })
            .then(resp => {
              if (resp.data.resultCode === "100") {
                resolve(resp.data);
              } else {
                this.$.toast("服务器错误");
              }
            });
        }.bind(this)
      );
    },
    show(){
			this.newPhoneNumber = ''
      this.isShow = true;
    },
    hide(){
      this.isShow = false;
    },
		//获取验证码点击
    getVerCode(){
			if(this.flag === false){
				this.$.toast('获取验证码过于频繁')
			}else if(this.newPhoneNumber == '') {
					this.$.toast('手机号不能为空');
				} else if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.newPhoneNumber))) {
					this.$.toast('手机号格式不正确')
				} else if(!this.flag) {
					return;
				} else if(this.newPhoneNumber == this.mobile){
          this.$.toast('不能和已绑定手机号码相同')
				} else {
					this.flag = false;
					let vm = this;
					let timer = setInterval(function() {
						vm.countDown--
						vm.text= vm.countDown + '秒'
						vm.flag = false
            console.log(vm.text)
						if(vm.countDown <= 0) {
							clearTimeout(timer)
							vm.verifyNumber = '', // 验证码
							vm.countDown = 60, //倒计时时间
							vm.flag = true, //判断是否可以点击
							vm.phoneNumber = null; //手机号
							vm.text = '获取验证码'
						}
					}, 1000)
					this.getVerCodefun().then(res=>{
							console.log(res);
							vm.validateCode = res.validateCode;
					})
				}
    },
		// 发送验证码请求
		getVerCodefun(){
			let vm = this;
			return new Promise(
        function(resolve, reject) {
          this.$.get({
              methodName: "SendValidateCode",
							phoneNumber:this.newPhoneNumber,
							type:'6',
              shopId: this.shopId || "",
			        userId: this.userId || ""
            })
            .then(resp => {
              if (resp.data.resultCode === "100") {
                resolve(resp.data);
              } else {
                this.$.toast("服务器错误");
								reject(resp.data);
              }
            });
        }.bind(this)
      );
		},
    submit(){
			if(this.newPhoneNumber == '') {
					this.$.toast('手机号不能为空');
					return;
				} else if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.newPhoneNumber))) {
					this.$.toast('手机号格式不正确')
					return;
				}
				if(this.verCode === ''){
				this.$.toast('验证码不能为空')
				return;
			}
			if(this.verCode !== this.validateCode){
				this.$.toast('验证码错误')
				return;
			}
			this.bind().then(res=>{
				this.$.toast('您已成功修改挪车电话')
      	this.isShow = false;
				this.mobile = this.newPhoneNumber;
			})
		},
		bind(){
			return new Promise(
        function(resolve, reject) {
          this.$.get({
							methodName: "UpdateMoveCarBinding",
							moveCarCode:this.sendCode,
							mobile:this.newPhoneNumber,
              shopId: this.shopId || "",
			        userId: this.userId || ""
            })
            .then(resp => {
              if (resp.data.resultCode === "100") {
                resolve(resp.data);
              } else {
                this.$.toast("服务器错误");
								reject(resp.data);
              }
            });
        }.bind(this)
      );
		}
		
  },
  components: {
    magicHeader,
		VueQr,
		empty
  }
};
</script>
<style scoped="scoped">
#qrcode_mine {
	width:100%;
	height: 400px;
  padding-top: 100px;
	background: none;
}

#qrcode_mine img{
	position: absolute;
	left: calc(50% - 125px);
	top:100px
}

#logo_img{
	width: 40px;
	height: 40px;
	left: calc(50% - 20px)!important;
	z-index: 100;
	top:180px!important;
}

.qrcode_mine_img {
	text-align: center;
}
#my_aboutVf .title .down-code img{
	margin: 0 auto;
}

.qrcode_mine_img img {
	margin: 0 auto;
}
#logo_img{
	width: 40px;
	height: 40px;
	position: relative;
}
.qrcode_mine-footer {
	width: 100%;
  text-align: center;
  margin-top: 50px;
}

.qrcode_mine-footer p {
	color: black;
	font-size: 14px;
	line-height: 30px;
}

.qrcode_mine_tel {
	color: black;
	font-size: 14px;
	line-height: 20px;
}
.qrcode_mine_tel i{
	display: inline;
}
.qrcode_mine_tel span {
	display: inline-block
}

.qrcode_mine_tel input {
	width: 90px;
	display: inline-block;
	padding: 0;
	background: none;
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	border: 0;
	height: 20px
}

.qrcode_mine_tel .icon-bianji {
	width:25px;
	height:25px;
	font-size: 20px;
	color: #F78E1E;
	line-height: 0px;
}
#phoneModel {
  display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 0 5%;
}

#phoneModel .modal-content {
	flex: auto;
	width: 100%!important;
	height: 205px;
	border-radius: 10px;
	background-color: #fff;
	text-align: center;
}
#phoneModel .modal-content h3 {
	padding: 10px;
	font-weight: bold;
	font-size: 16px;
}
#phoneModel .modal-content .inputBox li {
	width: 90%;
	margin: 5px auto;
}
#phoneModel .modal-content .inputBox li input {
	height: 34px;
	line-height: 34px;
	border-radius: 5px;
	border: 1px solid #909090;
	padding: 0 5px!important;
}
#phoneModel .modal-content .inputBox li #phoneNumber {
	width: 100%;
	box-sizing: border-box;
}
#phoneModel .modal-content .inputBox .verCodeBox {
	display: flex;
}
#phoneModel .modal-content .inputBox .verCodeBox input {
	height: 34px;
	line-height: 34px;
	flex: 1;
}
#phoneModel .modal-content .inputBox .verCodeBox span {
	float: right;
	height: 34px;
	line-height: 34px;
	width: 100px;
	margin: 0 0 0 10px;
	border-radius: 5px;
	border: 1px solid #909090;
}
#phoneModel .modal-content .buttonBox {
	width: 90%;
	margin: 20px auto;
	display: flex;
}
#phoneModel .modal-content .buttonBox li {
	flex: 1;
}
#phoneModel .modal-content .buttonBox li input {
	height: 30px;
	line-height: 30px;
	width: 90%;
	border: 1px solid #909090;
	text-align: center;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 0!important;
}
#wrapper{
	position: relative;
	height: 100vh;
}
#wrapper>ul{
	position: absolute;
	text-align:center;
	width: 100%;
	top:calc(45vh - 44px);
}
#wrapper>ul>li>img{
	width: 150px;
	height: 89px;
}
#wrapper>ul>li>h4{
	color: #BEBEBE;
}
#edit{
	margin-left: 5px;
}
#makeCall .result_empty{
    height: 100vh;
}
</style>